<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择网盘</title>
    <script src="js/jquery/jquery-3.4.1.min.js"></script>
</head>
<style>
    .header{
        width: auto;
        height: 80px;
        background-color: lightskyblue;
    }

    .title{
        color: white;
        float: left;
        margin-left: 20px;
    }

    .header:after .content:after{
        clear: both;
    }


    /* 下拉按钮样式 */
    .dropbtn {
        background-color: rgba(224, 222, 222, 0.6);
        color: black;
        padding: 16px;
        border: none;
        font-size: 16px;
        cursor: pointer;
        border-radius: 2px;
        width: 155px;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        margin-left: 70%;
        margin-top: 10px;
    }

    /* 下拉内容*/
    .dropdown-content {
        /* 默认隐藏*/
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    /* 下拉菜单的链接 */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 鼠标移上去后修改下拉菜单链接颜色 */
    .dropdown-content a:hover {background-color: #f1f1f1}

    /* 在鼠标移上去后显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* 下拉内容显示时下拉按钮的颜色需要改变*/
    .dropdown:hover .dropbtn {
        background-color: #82bbee;
    }

    .netdisk,.footer{
        margin: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .addNetdisk{
        text-align: center;
        border: 1px solid #ddd;
        width: 150px;
        height: 150px;
        padding: 4px;
        border-radius: 4px;
        line-height: 1.5;
    }

    .addNetdisk:hover{
        border: 1px solid #82bbee;
    }

    .addA{
        text-decoration: none;
        color: #8a8a8a;
    }

    .next{
        font-size: 28px;
        color: #82bbee;
        border-radius: 5px;
        border: 1px solid #82bbee;
        width: 200px;
        height: 50px;
        cursor: pointer;
        background-color: white;
    }

    .next:hover{
        background-color: #82bbee;
        color: white;
    }
</style>
<body>
<div class="main">
    <div class="header">
        <h2 class="title">快速创建收件夹</h2>
        <div class="dropdown">
            <button class="dropbtn">个人中心</button>
            <div class="dropdown-content">
                <a href="/index">返回主页</a>
                <a href="/to_change_password">修改密码</a>
                <a href="/exit">退出登录</a>
            </div>
        </div>
    </div>
    <div class="content">
        <h1 style="text-align: center">选择已有网盘或添加新网盘</h1>
        <div id="netdisk-container">
        </div>
    </div>
    <div class="footer">
        <button class="next" onclick="function f() {
            if(SelectedPanIndex==-1){
                alert('请选择网盘')
                return
            }
          location.href = '/add_folder?index=' + SelectedPanIndex
        } f()">下一步</button>
    </div>
</div>
</body>
<script>
    $(function () {
        SelectedPanIndex = -1
        $.ajax({
            url:"/get_all_driver",
            success(res) {
                var index = 0;
                if(res['res'] == 'user_error'){
                    alert("请登录")
                    location.href = "/login"
                    return
                }
                for (; index < res['pan_count']; index++) {
                    value = res[index]
                    var baidu_name = value["baidu_name"]
                    var s = netdisk_str.replaceAll("@index", index)
                    var s = s.replaceAll("@name", baidu_name)
                    $("#netdisk-container").append(s)
                }
                $(".netdisk").click(function () {
                    $.each($(".netdisk"), function(index, value){
                        var img = $(this).find("img")[1]
                        img.src = ""
                    })
                    SelectedPanIndex = parseInt($(this).attr("id").substring(7))
                    var img = $(this).find("img")[1]
                    img.src = "/img/正确.png"
                })
                var s = add_netdisk_str.replaceAll("@index", index)
                $("#netdisk-container").append(s)
            },
            error(e){
                alert("error")
                location.href = "/index"
            }
        })
    })

    $(function (){
    })


    netdisk_str = '' +
        '            <div class="netdisk" id="netdisk@index">\n' +
        '                <div class="">\n' +
        '                    <a href="#" class="addA">\n' +
        '                        <div style="width: 150px;height: 120px">\n' +
        '                            <img src="img/百度网盘.png" alt="" style="margin-top: 10px;width: 100px;height: 100px">\n' +
        '                        </div>\n' +
        '                        <div style="width: 150px">\n' +
        '                            <img/>' +
        '                            <span id="span@index">@name</span>\n' +
        '                        </div>\n' +
        '                    </a>\n' +
        '                </div>\n' +
        '            </div>'

    add_netdisk_str = '' +
        '            <div class="netdisk" onclick="addDiv()">\n' +
        '                <div class="addNetdisk">\n' +
        '                    <a href="/baidu_oauth_index?index=@index" class="addA">\n' +
        '                        <div style="width: 150px;height: 120px">\n' +
        '                            <img src="img/添加.png" alt="" style="margin-top: 10px;width: 100px;height: 100px">\n' +
        '                        </div>\n' +
        '                        <div style="width: 150px">\n' +
        '                            <img/><span>添加网盘</span>\n' +
        '                        </div>\n' +
        '                    </a>\n' +
        '                </div>\n' +
        '            </div>'
</script>
</html>